const {resolve} = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// dev: 'webpack-dev-server'
module.exports = {
	mode: 'production',
	entry: './index.js',
	output: {
		path: resolve(__dirname, 'dist'),
		filename: 'js/index.js',
		clean: true
	},
	resolveLoader: {
		modules: ['node_modules', resolve(__dirname, "./loaders")]
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				use: 'file-loader'
			},
			{
				test: /\.css$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader
					},
					'css-loader'
				]
			},
			{
				test: /\.md$/,
				use: 'doc-loader'
			}
		]
	},
	// 注册插件
	plugins: [
		new HTMLWebpackPlugin({
			template: './public/index.html',
			filename: 'index.html',
			title: 'webpack-plugin'
		}),
		new MiniCssExtractPlugin({
			filename: '[name].css'
		})
	],
	// 当我们使用devServer启动开发服务器 webpack依然会帮我们打包 但是 打包后生成的代码 不存放在硬盘当中 存放到内存
	devServer: {
		// 端口
		port: 8888,
		// 是否自动开启浏览器
		open: true,
		// proxy 传入key和value
		// key 对应的是请求前缀
		// 请求就会通过webpack服务器代理到value
		// 当我们请求/data  拼接http://localhost:3000/data
		proxy: {
			// "/data": "http://localhost:3000"
			"/data": {
				target: "http://localhost:3000",
				pathRewrite: {
					'^/data': ''
				}
			}
		}
	}
}
